If you want to style that button specifically a little bit more, you can do this so that the plus is aligned and the button is slightly more pronounced:

  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: bold;

Before (left) and after (right):

Looks a bit better now, but just one more thing to check – is the input font size at least 16px? When I tap the field on iOS, it zooms the entire page, which usually means that the font size is less than that size

Looks a bit better now, but just one more thing to check – is the input font size at least 16px? When I tap the field on iOS, it zooms the entire page, which usually means that the font size is less than that size

The input font size seems to be 14px. However, it's the same with the original Transfer Credits modal, as well as Edit Roadmap, New Roadmap, Add Year, etc. According to the inspector in Firefox and Chrome, all these input boxes seem to have font-size: 1rem due to the form-control css class from Bootstrap (Form.Control), which sets them to the root font size of 14px.

I tested the inputs of existing modals on iOS 18 (with appetize.io), and even the main course catalog search bar, and they all seem to have this zoom behavior. I think this makes sense and is expected, to let users see the input more clearly? But if it's a problem, maybe we should make a new issue for it, since it affects much more than just the Transfer Credits restyle?

EDIT: just checked and found that there's already an issue for this (see #457)